import React, { Component } from "react";
// 组件
import { Toast } from "antd-mobile";

import MainLayout from "@component/mainLayout/mainLayout";
import CouponItem from "@views/viewCommon/CouponItem";

import { InterfaceG } from "@config/Config";
import yhTools from "@tools/yh";

import "./openXhfSuccess.scss";

/**
 * 描述：
 * 作者：zenghq
 * 日期：2021-06-01
 */
class openXhfSuccess extends Component {
	constructor(props) {
		super(props);
		this.state = {
			availableAmt: "--",
			couponList: [],
			xhfAmt: "--"
		};
	}
	/*******************生命周期 start************************/
	componentDidMount = () => {
		Toast.loading("加载中...", 10);
		this.xhfQueryCreditResultInfo();
	};
	componentWillUnmount = () => {};
	/*******************生命周期 end************************/

	/*******************业务方法 start************************/
	xhfQueryCreditResultInfo = () => {
		let objs = {
			url: InterfaceG.xhfQueryCreditResultInfo,
			params: {}
		};
		yhTools.request(objs).then(resp => {
			const { code, data = {}, message } = resp;
			if (code === "0") {
				const { availableAmt, list = [], xhfAmt } = data;
				this.setState({
					availableAmt,
					couponList: list,
					xhfAmt
				});
			} else {
				Toast.info(message, 2);
			}
		});
	};
	/*******************业务方法 end************************/

	/*******************点击事件 start************************/
	seeMoreClick = () => {
		this.props.history.push("/paymentDiscount/coupon");
	};
	/**
	 * @msg: 券详情展示
	 * @param {*} i
	 * @return {*}
	 */
	couponDetailShow = i => {
		let data = this.state.couponList;
		let isShow = data[i].isShow;
		data[i].isShow = !isShow;
		this.setState({ couponList: data });
	};
	seeClick = () => {
		this.props.history.push("/xhfHomeCredit");
	};
	/*******************点击事件 end************************/

	/**渲染 */
	render() {
		const { xhfAmt, couponList, availableAmt } = this.state;
		const _pageParams = {
			header: {
				title: "开通结果",
				headerBackground: "#fff",
				titleColor: "#232323",
				newBackButt: true
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles
		};
		return (
			<MainLayout pageParams={_pageParams}>
				<div className="open_xhf_success-content font-b6">
					<section className="sub-title font-c1">恭喜您获得</section>
					<section className="card-box">
						<div className="card">
							<div className="money-t color-bf5757">可提现额度</div>
							<div className="money color-f82633">
								{availableAmt}
								<span className="unit">元</span>
							</div>
						</div>
						<div className="card">
							<div className="tip-box">可在永辉超市购物使用</div>
							<div className="money-t color-d8905a mt-42">小辉付额度</div>
							<div className="money color-f82633 mt-20">
								{xhfAmt}
								<span className="unit">元</span>
							</div>
							<div className="button" onClick={this.seeClick}>
								去查看
							</div>
						</div>
					</section>
					<section className="tip-t">
						Tips:使用小辉付购物有助于提升您的提现额度
					</section>
					<section className="coupon-title-box">
						<span className="left-text">小辉付权益已到账</span>
						<div className="right-text" onClick={this.seeMoreClick}>
							<span>查看更多</span>
							<i className="item-right-arrow" />
						</div>
					</section>
					<section>
						{couponList.slice(0, 3).map((v, i, a) => {
							return (
								<CouponItem
									styleType={
										v.couponTypeNo === "01" || v.couponTypeNo === "02"
											? "1"
											: "2"
									}
									couponStatus={"1"}
									notUse={true}
									index={i}
									couponArray={a}
									key={`${v.couponName}${i}`}
									item={v}
								/>
							);
						})}
					</section>
				</div>
			</MainLayout>
		);
	}
}

export default openXhfSuccess;
